<template>
	<view>
		<dfHeader :type="type" :key="timer"></dfHeader>
		<div style="position: relative;">
			<a>
				<img style="width: 100%;" :src="config.staticImgUrl+ 'guanggao.jpg'">
			</a>
		</div>
		<div class="zw_nr index_st15" style="padding-bottom: 0.2rem;margin-bottom: 1rem;">
			<div class="csyc" id="conent_area">
				<h1>{{data.title}}</h1>
				<div class="fb_r mt15">
					<b>原创：{{config.title}}</b>&nbsp;&nbsp;&nbsp;&nbsp;
					<time datetime="2019-01-29T12:03:38" pubdate="pubdate">{{data.time}}</time>
				</div>
				<div class="yuedu">
					<rich-text :nodes="htmlNodes" class="wxParse active-item-richtext" style="user-select: text;"></rich-text>
					<div class='tag'>标签：<a @tap="goTag(data)" v-for="(data,i) in tag">{{data}}</a></div>
				</div>
			</div>
		</div>
		<div class="zw_nr" style="padding: 0 1.5rem 0.2rem;">			
			<div style="position: relative;" id="pictitle">
				<div class="zstk_tab">
					<div class="adtg_hd11">
						<h2 class="xbai_title" style="margin-top: 0;">大家都在看</h2>
					</div>
					<a v-for="(d,i) in data.tags" @tap="goDetail(d)">
						<div class="zstk_item" style="padding-top: 0;">
							<div class="item_img">
								<img :src="config.staticUrl+d.pic">
							</div>
							<div class="item_intr">
								<h3 style="margin-top: 0;line-height: 28px;">{{d.title}}</h3>
							</div>
						</div>
					</a>
				</div>
			</div>

			<section class="index_st7 clearfix mt10">
				<div class="index_st7_ct1">招商加盟</div>
				<div class="index_st7_ct4">
					<div class="line"></div>
				</div>
			</section>
			<section class="jion">
				<ul>
					<li v-for="(data,i) in dataList.zhaoshang">
						<div class="img">
							<a @tap="goDetail(data)">
								<img :src="config.staticUrl+data.pic" :alt="data.title" />
							</a>
						</div>
						<div class="txt"><a @tap="goDetail(data)">
								<strong><em>{{i+1}}</em>{{data.title}}</strong></a>
							<p>{{data.subs}}</p>
							<div class="btn">
								<a class="red" href="https://tb.53kf.com/code/client/10165948/1" target="_blank">在线咨询</a>
								<a @tap="goDetail(data)">查看详情</a>
							</div>
						</div>
					</li>
				</ul>
			</section>
			<div class="wenz_more" @tap="$functions.goPage('/xinwen')"><span>查看更多</span></div>
		</div>


		<dfFooter></dfFooter>
	</view>
</template>

<script>
	// 处理html字符串
	import htmlParser from '@/common/html-parser'
	export default {
		components: {},
		data() {
			return {
				timer: '',
				type: 0,
				openFormStatus: false,
				loading: true,
				data: {},
				htmlNodes: '',
				hasImg: true,
				// 底部按钮的显示
				showBt: false,
				tag: [],
				dataList: {},
				config: this.$config
			}
		},
		onLoad(event) {
			uni.showLoading({});
			var id = this.$Route.query.id.replace(".html", '');
			// console.log(this.$Route.query)
			this.data.id = id;
			this.getDetail();
			this.getList();
		},
		methods: {
			goDetail: function(e) {
				var _this = this;
				// console.log(e);
				var phoneVerify = this.$functions.getCache('phoneVerify');
				phoneVerify.then(function(x) {
					console.log("phoneVerify:" + x)
					var type = e.typeId;
					if (x || type != 'baoguang')
						_this.$functions.goDetail(e, _this);
					else
						_this.openFormPhone();

				})
			},
			goTag(str) {
				this.$Router.push({
					name: 'tags',
					params: {
						search: str
					}
				})
			},
			// 获取数据列表
			getList() {
				let _this = this;
				var data = {
					pageSize: 8,
					minId: 0,
					typeId: "shouye"
				};
				this.$request.api_request('pl_list', data).then(function(data) {
					console.log(data);
					_this.dataList = data.result;
					// 取消刷新图标
					uni.stopPullDownRefresh();
				})
			},
			// 打开加盟框
			openForm() {
				// 轮流切换open值，触发模板里的watch函数
				this.openFormStatus = this.openFormStatus ? false : true;
				console.log('openForm');
			},
			getDetail() {
				let _this = this;
				this.$request.api_request('pl_list_detail', {
					id: this.data.id
				}).then(function(data) {
					// console.log(data)
					data = data.result;
					// 页面容错
					if (data.title == undefined) {
						_this.$functions.goPage("/404");
					}
					_this.type = '/' + data.typeId;
					if (_this.type == "zhaoshang")
						_this.showBt = true;

					// 触发header刷新，用来定位文章所属的菜单
					_this.timer = new Date().getTime();
					// console.log(data.pic=="")
					_this.hasImg = data.pic == "" ? false : true;
					data.pic = _this.$config.staticUrl + data.pic;
					_this.data = data;
					if (data.keywords != undefined)
						if (data.keywords.length > 0)
							_this.tag = data.keywords.split(',')
					_this.$functions.setTDK(data.title, data.subs, data.keywords);
					// 去掉图片，不然会影响文本显示
					var htmlString = data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none !important;\"");
					var htmlString = data.content;
					_this.htmlNodes = htmlParser(htmlString);
					_this.loading = false;
					uni.hideLoading();
				})
			}
		}
	}
</script>
<style lang="scss">	
	@import '@/static/css/online/detail.scss';
		
	//加盟

	.jion {
		padding: 0 .8rem;


		ul {}

		li {
			padding: .8rem 0;
			display: flex;
			overflow: hidden;
			border-bottom: 1px solid #e4e4e4;
			position: relative;
		}

		.img {
			width: 40%;
			float: left;
			margin-right: 2%;
		}

		img {
			width: 100%;
			height: auto;
		}

		.txt {
			width: 58%;
		}

		li:nth-child(1) em {
			background: #f44d35
		}

		li:nth-child(2) em {
			background: #C79A2F
		}

		li:nth-child(3) em {
			background: #F2D591
		}

		strong {
			font-weight: normal;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: .8rem;
			line-height: 1rem;
			height: 1rem;
		}

		em {
			background: #ccc;
			display: inline-block;
			width: 1.2rem;
			color: #fff;
			text-align: center;
			font-weight: normal;
			border-radius: .2rem;
			margin-right: .2rem;
		}

		p {			
			overflow: hidden !important;
			color: #999 !important;
			padding: .2rem 0 !important;
			font-size: .6rem !important;
			line-height: .8rem !important;
			height: 1.6rem !important;
			marin-top:0!important;
		}

		.btn {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 58%;
		}

		.btn a {
			display: block;
			display: block;
			border: 1px solid #f44d35;
			color: #f44d35;
			text-align: center;
			border-radius: .2rem;
			float: right;
			line-height: 1.5rem;
			font-size: .7rem;
			width: 45%;
		}

		.btn .red {
			background: #f44d35;
			color: #fff;
			margin-bottom: .8rem;
			float: left;
		}

	}
</style>
